<template>
	<view class="message-container">
		<text class="message-title">这里是消息页面</text>
		<view class="bottom-nav">
			<view class="nav-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">
				<image class="nav-icon" src="/static/Bottom_Home_1.png"></image>
				<text class="nav-text">首页</text>
			</view>
			<view class="nav-item" :class="{ active: currentTab === 'message' }" @click="switchTab('message')">
				<image class="nav-icon" src="/static/Bottom_Chat.png"></image>
				<text class="nav-text">消息</text>
			</view>
			<view class="nav-item" :class="{ active: currentTab === 'mine' }" @click="switchTab('mine')">
				<image class="nav-icon" src="/static/Bottom_Mine.png"></image>
				<text class="nav-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'VolunteerMessage',
	data() {
		return {
			currentTab: 'message'
		}
	},
	onBackPress() {
		uni.reLaunch({ url: '/pages/index/index' });
		return true;
	},
	methods: {
		switchTab(tab) {
			if(tab === 'home') {
				uni.navigateTo({ url: '/pages/volunteer/index' });
			} else if(tab === 'message') {
				// 当前页无需跳转
			} else if(tab === 'mine') {
				uni.navigateTo({ url: '/pages/volunteer/mine' });
			}
		}
	}
}
</script>

<style>
.message-container {
	width: 100%;
	min-height: 100vh;
	background: #f7f7f7;
	position: relative;
	padding-bottom: 120rpx;
}
.message-title {
	display: block;
	text-align: center;
	font-size: 36rpx;
	margin: 80rpx 0 40rpx 0;
	color: #75af74;
}
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: rgb(171, 210, 167);
	display: flex;
	border-top: 1rpx solid #e5e5e5;
	z-index: 999;
}
.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10rpx;
}
.nav-icon {
	width: 60rpx;
	height: 70rpx;
	margin-bottom: 8rpx;
}
.nav-text {
	font-size: 24rpx;
	color: #666666;
}
.nav-item.active .nav-text {
	color: #007aff;
}
</style> 